import React from 'react';
import { connect } from 'dva/index';
import { Button, Col, Form, Input, Radio, Row, Select, Table } from 'antd';
import Constants from '../../utils/Constants';
import {download} from '../../utils/commons';

const R = require('ramda');

const FormItem = Form.Item;
const marketReport = Form.create()(class MarketReport extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		//多个页面共用一个state的page跟list，这里面的首次查询必须带默认的page信息
		this.props.dispatch({ type: 'report/queryMarketInfo', payload: { ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE) } });
	}

    handleExport = () => {
        let values = this.props.form.getFieldsValue();
        let url = apiPath.mc + "/api/report/generate/marketInfo";
        download(url, values);
    }

	handleSearch = (flag) => {
		let values = this.props.form.getFieldsValue();
		let newPage = R.pick(['page', 'size'], this.props.report.page);
		if (!flag) newPage.page = 1;
		this.props.dispatch({
			type: 'report/queryMarketInfo',
			payload: {
				cstName: values.cstName,
				...newPage
			}
		});
	};

	columns = [
		{ title: '拜访时间', dataIndex: 'marketTime', key: 'marketTime' },
		{ title: '执行人', dataIndex: 'creator', key: 'creator' },
		{ title: '客户名称', dataIndex: 'cstName', key: 'cstName' },
		{ title: '客户来源', dataIndex: 'cstOrigination', key: 'cstOrigination' },
		{ title: '介绍人', dataIndex: 'introducer', key: 'introducer' },
		{ title: '拜访对象', dataIndex: 'marketObject', key: 'marketObject' },
		{ title: '营销方式', dataIndex: 'marketMode', key: 'marketMode' },
		{ title: '营销阶段', dataIndex: 'marketStage', key: 'marketStage' },
		{ title: '成果定性', dataIndex: 'result', key: 'result' }	
	];

	render() {
		let dataSource = R.isNil(this.props.report.dataSource) ? {} : this.props.report.dataSource;
		let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
		const { getFieldDecorator } = this.props.form;
		let values = this.props.form.getFieldsValue();
		let pagination = {
			showTotal: total => `共 ${total} 条数据`,
			current: this.props.report.page.page,
			pageSize: this.props.report.page.size,
			total: this.props.report.page.totalRow,
			showSizeChanger: true,
			onShowSizeChange: (current, size) => {
				let newPage = R.pick(['page', 'size'], this.props.report.page);
				newPage.size = size;
				newPage.page = 1;
				this.props.dispatch({
					type: 'report/queryMarketInfo',
					payload: {
						cstName: values.cstName,
						...newPage
					}
				});
			},
			onChange: (pageNumber, pageSize) => {
				let newPage = R.pick(['page', 'size'], this.props.report.page);
				newPage.page = pageNumber;
				this.props.dispatch({
					type: 'report/queryMarketInfo',
					payload: {
						cstName: values.cstName,
						...newPage
					}
				});
			}
		}

		return (
			<div>
				<Row>
					<Col span={8}><FormItem {...formItemLayout} label={'客户名称'}>{getFieldDecorator('cstName')(<Input />)}</FormItem></Col>
					<Col span={8} style={{ marginLeft: 24 }}>
						<Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this, false)}>查询</Button>
						<Button type="primary" icon="export" style={{ marginLeft: 5 }} onClick={this.handleExport.bind(this)}>导出数据</Button>
					</Col>
				</Row>
				<Table loading={this.props.loading} rowKey={record => record.id} dataSource={this.props.report.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} />
			</div>
		)
	}
})

function mapStateToProps(state) {
	return {
		loading: state.loading.models.report, report: state.report
	};
}

export default connect(mapStateToProps)(marketReport);